<template>
	<div class="staff-manage">
		<div class="top-title">
			<!-- <div
				:class="{
					oneActive: grade === '一级行',
					twoActive: grade === '二级行',
					threeActive: grade === '分支行',
				}"
			>
				{{ grade }}
			</div> -->
			<div class="title-tip">{{ '中国银行苏州姑苏沧浪分支行' }}</div>
		</div>
		<div class="manage-top">
			<div class="export-line">
				<div class="export">导出</div>
				<van-button class="manage" icon="records" round type="default"> 管理 </van-button>
			</div>
			<div class="manage-search">
				<van-search
					class="search-value"
					action-text="搜索"
					v-model="searchValue"
					show-action
					placeholder="请输入人员姓名"
				/>
			</div>
		</div>
		<!-- 列表内容 -->
		<div ref="mescroll" class="mescroll">
			<van-cell is-link v-for="(item, index) in newArr" :key="index" label="">
				<template #title>
					<div class="van_cell_title">
						<img src="~/img/marketingExtension/1level_icon.png" mode="widthFix" v-if="1 === 1" />
						<img src="~/img/marketingExtension/2level_icon.png" mode="widthFix" v-if="1 === 2" />
						<span>{{ item.name }}</span>
					</div>
				</template>
			</van-cell>
		</div>
	</div>
</template>
<script>
	import { queryBankList } from '@/interfaces/marketingExtension';
	import MeScroll from 'mescroll.js';
	import 'mescroll.js/mescroll.min.css';
	export default {
		name: 'staffManage',
		/*1. Vue扩展 */
		extends: '', // extends和mixins都扩展逻辑，需要重点放前面
		mixins: [],
		components: {},
		/* 2. Vue数据 */
		props: {},
		model: { prop: '', event: '' }, // model 会使用到 props
		data() {
			return {
				userInfo: {},
				searchValue: '',
				mescroll: null,
				newArr: [],
				grade: '一级行',
			};
		},
		computed: {},
		watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
		/* 3. Vue资源 */
		filters: {},
		directives: {},
		/* 4. Vue生命周期 */
		created() {},
		mounted() {
			// 创建MeScroll对象:为避免配置的id和父组件id重复,这里使用ref的方式初始化mescroll
			this.mescroll = new MeScroll(this.$refs.mescroll, {
				// 在mounted生命周期初始化mescroll,以确保您配置的dom元素能够被找到.
				// down: {
				// 	auto: false, // 是否在初始化完毕之后自动执行下拉回调callback; 默认true
				// 	callback: this.downCallback, // 下拉刷新的回调
				// },
				up: {
					auto: true, // 是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
					callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
					page: {
						num: 0, // 当前页码,默认1,回调之前会加1,即callback(page)会从1开始
						size: 20, // 每页数据的数量
					},
					noMoreSize: 5000, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					// toTop: {
					// 	// 配置回到顶部按钮
					// 	src: require('../../assets/imgs/marketingExtension/go_top.svg'),
					// 	offset: 1000,
					// },
				},
			});
		},
		destroy() {},
		/* 5. Vue方法 */
		methods: {
			// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
			upCallback(page) {
				// console.log('自动上拉记载');
				// 联网加载数据
				this.getListDataFromNet(
					page.num,
					page.size,
					(curPageData) => {
						// 添加列表数据
						if (page.num == 1) {
							this.newArr = curPageData;
						} else {
							this.newArr = this.newArr.concat(curPageData);
						}
						// 数据渲染成功后,隐藏下拉刷新的状态
						this.$nextTick(() => {
							this.mescroll.endSuccess(curPageData.length);
						});
					},
					() => {
						// 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
						this.mescroll.endErr();
					}
				);
			},
			async getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
				if (pageNum === 0) {
					// 下拉刷新返回的数据
					const params = {
						pageNum: pageNum,
						pageSize: pageSize,
						agencyCode: 'F6D6A9C188A7785AE053541012AC9FB9',
					};
					console.log(params, 'params');
					const res = await queryBankList(params);
					console.log(res, '下拉刷新返回的数据');
					successCallback && successCallback(res.data.list);
				} else {
					// 上拉加载返回的数据
					const params = {
						pageNum: pageNum,
						pageSize: pageSize,
						agencyCode: 'F6D6A9C188A7785AE053541012AC9FB9',
					};
					console.log(params, 'params');
					const res = await queryBankList(params);
					console.log(res, '上拉加载返回的数据');
					successCallback && successCallback(res.data.list);
				}
			},
		}, // all the methods should be put here in the last
	};
</script>
<style>
	.mescroll-upwarp {
		display: none !important;
	}
</style>
<style scoped lang="scss">
	.staff-manage {
		position: relative;
		// width: 375px;
		height: 100vh;
		background: linear-gradient(0deg, rgba(243, 247, 254, 0.4), rgba(179, 206, 246, 0.4));
		overflow: hidden;
		.top-title {
			display: flex;
			height: 60px;
			align-items: center;
			padding-left: 18px;
			.title-tip {
				font-size: 16px;
				font-family: Source Han Sans SC;
				font-weight: bold;
				color: #000000;
			}
		}
		.manage-top {
			height: 129px;
			// background: linear-gradient(0deg, #F3F7FE, #B3CEF6);
			background: #fff;
			// padding-top: 15px;
			// border: 1px solid red;
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;
			.export-line {
				display: flex;
				height: 52px;
				align-items: center;
				// border: 1px solid red;
				padding: 0 13px;
				justify-content: space-between;
				.export {
					width: 64px;
					height: 27px;
					background: #6ac69e;
					border-radius: 6px;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 14px;
					font-family: Source Han Sans SC;
					font-weight: 400;
					color: #ffffff;
				}
				.manage {
					font-size: 13px;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #458fe7;
				}
			}
			.manage-search {
				// border: 1px solid red;
				height: 45px;
				background: #ffffff;
				border-radius: 6px;
				margin: 0 13px;
				display: flex;
				align-items: center;
				.search-value {
					flex: 1;
					background: #f3f3f3;
					border-radius: 6px;
					padding: 4px 0;
					padding-right: 15px;
					/deep/ .van-search__content {
						background: #f3f3f3;
					}
					/deep/ .van-search__action {
						border-left: 1px solid #c7c7c7;
						border-radius: 0;
						line-height: 20px;
						padding-left: 15px;
					}
				}
			}
			.manage-sign {
				height: 60px;
				background-image: url('~img/marketingExtension/per_manage.svg');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30px 0 70px;
				margin: 6px 4px;
				.manage-title {
					font-size: 17px;
					font-family: Alibaba PuHuiTi;
					font-weight: 500;
					color: #ffffff;
				}
				.manage-btn {
					height: 26px;
					background: #abccfa;
					border-radius: 13px;
					padding: 0 24px;
					line-height: 26px;
					text-align: center;
					font-size: 13px;
					// font-family: Alibaba PuHuiTi;
					font-weight: 400;
				}
				/deep/ .van-button--default {
					border: none;
				}
			}
		}
		.mescroll {
			position: fixed;
			top: 162px;
			// bottom: 10px;
			// border: 1px solid #f4f4f4;
			border-top: none;
			border-radius: 5px;
			height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
			overflow-x: hidden;
			background: #fff;
			// border: 1px solid red;
			left: 0;
			right: 0;
			width: auto;
		}
		.oneActive {
			padding: 2px 10px;
			background: #eb7f6e;
			border-radius: 3px;
			font-size: 13px;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #ffffff;
			margin-right: 8px;
		}
		.twoActive {
			padding: 2px 10px;
			background: #6ac69e;
			border-radius: 3px;
			font-size: 13px;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #ffffff;
			margin-right: 8px;
		}
		.threeActive {
			padding: 2px 10px;
			background: #72a8ee;
			border-radius: 3px;
			font-size: 13px;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #ffffff;
			margin-right: 8px;
		}
		.van_cell_title {
			display: flex;
			align-items: center;
		}

		.van_cell_title img {
			width: 12px;
			height: 12px;
			margin-right: 5px;
		}
	}
	/deep/ .van-button {
		border: none;
	}
</style>
